<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自定义下拉框</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<input id="combo">
<div id="fruit">
  <div style="color: #99bbeb; background: #fafafa; padding: 5px;">选择一种你喜欢的水果</div>
  <div style="padding: 10px">
    <label>
      <input type="radio" name="fruit" value="apple">
      <span>苹果</span>
    </label><br>
    <label>
      <input type="radio" name="fruit" value="pear">
      <span>梨</span>
    </label><br>
    <label>
      <input type="radio" name="fruit" value="lemon">
      <span>柠檬</span>
    </label><br>
    <label>
      <input type="radio" name="fruit" value="grape">
      <span>葡萄</span>
    </label><br>
    <label>
      <input type="radio" name="fruit" value="banana">
      <span>香蕉</span>
    </label>
  </div>
</div>
<script type="text/javascript">
$(function () {
  //构建下拉框
  $("#combo").combo({
    //是否是必填字段，默认值为false
    required: true,
    //是否支持多选
    //multiple: true,
    //该字段是否只读
    //readonly: true
    //是否显示向下箭头按钮，默认值为true
    hasDownArrow: false
  });
  //将id为fruit的元素添加指定下拉框的面板中
  $("#fruit").appendTo($("#combo").combo('panel'));
  //选择祖先元素是id为fruit的input元素并绑定onclick事件
  $("#fruit input").click(function () {
    var val = $(this).val();
    //选择紧随当前元素之后的元素，并获取其内部文本
    var text = $(this).next('span').text();
    $('#combo').combo('setValue', val).combo('setText', text).combo('hidePanel');
  });
  $("#combo").combo('panel').panel({
    openAnimation: 'slide',
    closeAnimation: 'fade'
  });
})
</script>
</body>
</html>